<template>
    <div class="editbox">
       <el-input  id="mytextarea"  v-model="rmark"    :rows="6"  type="textarea" placeholder="客房详情"/>
      
      
      <!-- <Tinymce ref="editorRef"  /> -->

      <!-- <textarea :id="tinymceId" /> -->

      
    </div>
</template>
  
  <script>
    import { defineComponent, computed, ref,onMounted,defineProps} from 'vue'
    
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver'
    import 'tinymce/icons/default/icons'

    export default {
    name:'Edit',
    setup(){
         const rmark = ref('测试')
        const tinymceId = ref('mytextarea');
        const editorRef = ref();  
        // const cx = `#${tinymceId.value}`;
        // console.log('cx',cx);
        // const initOptions = computed(function(){
        //     const publicPath = 'abc';
        //     console.log('publicPath',publicPath);
        //       return {
        //         selector: `#${tinymceId.value}`,
        //         language_url: './tinymce/langs/zh_CN.js',
        //         language: 'zh_Hans',
        //         skin_url: './tinymce/skins/ui/oxide',
        //         content_css: './tinymce/skins/ui/oxide/content.min.css',
        //       }
        // })


        const props = {
            value: {
              type: String,
              default: ''
            },
            disabled: {
              type: Boolean,
              default: false
            },

          plugins: {
            type: [String, Array],
            default: 'lists image media table wordcount save preview'
            // 插件需要import进来
            // default: 'wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave'
          },
          toolbar: {
            type: [String, Array],
            default:
              'undo redo |  formatselect | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | lists image media table | codesample code removeformat save preview'
            // default:
            //   "formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help",
          }
        }

        console.log('props',props); 
        const initOpt = {
            // width: 720,
            selector: '#mytextarea',
            height: 400,
            language_url: './tinymce/langs/zh-Hans.js',
            language: 'zh-Hans',
            // 皮肤：这里引入的是public下的资源文件
            skin_url: './tinymce/skins/ui/oxide',
            // skin_url: 'tinymce/skins/ui/oxide-dark',//黑色系
            content_css: './tinymce/skins/content/default/content.css', //内容区域css样式
            // images_file_types: "jpg,svg,webp",
            // images_upload_url: "xxxxxxxxxxxxx",//系统默认配置的自动上传路径，需替换为真实路径测试
            plugins: props.plugins,
            toolbar: props.toolbar,
            branding: false,
            // 隐藏菜单栏
            menubar: false,
            // 是否显示底部状态栏
            statusbar: true,
            // convert_urls: false,
            // 初始化完成
            init_instance_callback: (editor) => {
              console.log('初始化完成：', editor)
            }
            // 此处为自定义图片上传处理函数
            // images_upload_handler: (blobInfo, progress) => {
            //   console.log("图片上传处理：", blobInfo.blob());
            //   const formData = new FormData();
            //   formData.append("file", blobInfo.blob());
            //   axiosReq({
            //     url: "xxxxxxxxxxx",//需替换为真实路径测试
            //     data: formData,
            //     method: "post",
            //     bfLoading: true,
            //     isUploadFile: true,
            //   }).then((res) => {
            //     console.log(res);
            //   });
            // },
          }

          let textContent = ref(props.value)

      onMounted(() => {
        console.log("初始化函数。。。。");
        tinymce.init(initOpt)
     })

        return{
          
          tinymceId,
          rmark ,
          editorRef 
        }

    }
}
  </script>
<style>
  .editbox{
    width: 800px;
    margin: 0 auto;
  }
</style>